<template>
	<view>
		<image src="../../static/footer3-sel.png" class="aside" @click="asideshow()"></image>
		<Banner />
		<Nav></Nav>
		<Merry></Merry>
		<view class="hr"></view>
		<Cookers></Cookers>
		<view class="hr"></view>
		<goods></goods>
		<view class="hr"></view>
		<Card></Card>
		<view class="" v-show="visible">
			<Aside ></Aside>
		</view>
		<view class="bottombox">
			<image src="../../static/gg.jpg" class="bottomimg"></image>
		</view>

	</view>
</template>

<script>
	import Banner from './banner.vue'
	import Nav from './nav.vue'
	import Merry from './merry.vue'
	import Cookers from './cookers.vue'
	import Goods from './goods.vue'
	import Card from './card.vue'
	import Aside from './aside.vue'

	export default {
		components: {
			Banner,
			Nav,
			Merry,
			Cookers,
			Goods,
			Card,
			Aside
		},
		data() {
			return {
				visible: false,
				
			}
		},
		onLoad() {

		},
		methods: {
			asideshow() {
				 this.visible = !this.visible
		
			},
			 
		}
	}
</script>

<style>
	.hr {
		height: 10px;
		background-color: #EEEEEE;
	}

	.bottombox {
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.bottomimg {
		width: 100%;
		height: 350rpx;
	}

	.aside {
		width: 20px;
		height: 20px;
		position: absolute;
		left: 10px;
		top: 10px;
		z-index: 1
	}
</style>
